<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<searchInput :inputcontent="inputcontent" @sendData="getInputValue"  id="main"></searchInput >


		<scroll-view scroll-y="true" class="ContentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentScrollItemInner" v-for="(item,index) in listData" @click.stop="clickItem(item,index)">

				<!-- 离线 -->
				<view class="ContentScrollItem" v-if="item.online=='false'">

					<view class="ContentScrollItemLeft" @click.stop="clickEquipment()">
						<image class="ContentScrollItemLeftImg" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="ContentScrollItemRight">
						<text class="ContentScrollItemRightTopText">{{item.deviceName}}</text>
						<text class="ContentScrollItemRightCenterText">SN：{{item.deviceSn}}</text>
						<view class="ContentScrollItemRightStatus">
							<image class="ContentScrollItemRightStatusImg" src="/static/clock/lixian.png" mode=""></image>
							<text class="ContentScrollItemRightStatusTextUnline">离线</text>
						</view>

					</view>

				</view>
				<!-- 离线 -->



				<!-- 在线 -->
				<view class="ContentScrollItem" v-if="item.online=='true'">
					<image class="ContentScrollItemImg" src="/static/clock/xuanzhong.png" mode=""></image>

					<view class="ContentScrollItemLeft" @click.stop="clickEquipment()">
						<image class="ContentScrollItemLeftImg" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="ContentScrollItemRight">
						<text class="ContentScrollItemRightTopText">{{item.deviceName}}</text>
						<text class="ContentScrollItemRightCenterText">SN：{{item.deviceSn}}</text>
						<view class="ContentScrollItemRightStatus">
							<image class="ContentScrollItemRightStatusImg" src="/static/clock/zaixian.png" mode=""></image>
							<text class="ContentScrollItemRightStatusText">在线</text>
						</view>

					</view>

				</view>
				<!-- 在线 -->


			</view>
		</scroll-view>



		<view class="loginContent" id="mainBottom">

			<button @click="addClick()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>

	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
	import searchInput from '@/components/searchInput.vue'
  import {timeDeviceList} from "@/pages/api/api.js";



	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},
		data() {
			return {
				title:'可用设备',
				isback:true,

				inputcontent: '设备名称/型号',

				login:'确定',


				listData:[],
				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
				// 提交参数
				sizeManagerData: {
          storeId: '',
          tenantId: '',
          nameAndSn: '',
				},

			}
		},


		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop-40
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();



		},

		onLoad() {
      const app = getApp();
      this.sizeManagerData.storeId = app.globalData.storeId
      this.sizeManagerData.tenantId = app.globalData.tenantId
			this.loadData()
		},
		methods: {
      loadData(){
        timeDeviceList(this.sizeManagerData).then((res) => {
          if (res.code == 200) {
            this.listData = res.rows;
          }
        })
      },
			// 点击 进入查看设备详情
			clickEquipment(){
				uni.navigateTo({
					url: '/subPack/clockIn/deviceInformation/deviceInformation',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},
			// 选择设备  更改选择状态
			clickItem(e,index){

				this.listData.forEach((item,itemIndex) =>{
					if(index==itemIndex){
						this.listData[index].select=true
					}else{
						item.select=false;
					}
				})


			},
			// 获取输入框的值
			getInputValue(e) {
				console.log('获取输入框的值', e);
        this.sizeManagerData.nameAndSn = e
        this.loadData();
			},


		}
	}
</script>

<style lang="scss">
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

	position: absolute;
	bottom: 30rpx;
	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}
	.ContentScrollItemRightStatusTextUnline{
		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #BBBBBB;


	}

	.ContentScrollItemRightStatusText{
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #57B275;

	}
	.ContentScrollItemRightStatusImg{
		display: flex;
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	.ContentScrollItemRightStatus{
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.ContentScrollItemRightCenterText{
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 5rpx;

	}
	.ContentScrollItemRightTopText{
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 5rpx;

	}
	.ContentScrollItemRight{
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: left;


	}
	.ContentScrollItemLeftImg{
		display: flex;
		justify-content: center;
		width: 52rpx;
		height: 112rpx;
	}
	.ContentScrollItemLeft{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 30rpx;
		width: 150rpx;
		height: 150rpx;
		background: #ECF5FD;
		border-radius: 10rpx;
	}
	.ContentScrollItemInner{

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;



	}


	.ContentScrollItem{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		margin-bottom: 30rpx;

		.ContentScrollItemImg{
			width: 690rpx;
			height: 210rpx;
			position: absolute;

		}

	}
	.ContentScroll{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		margin-top: 30rpx;
		height: 900rpx;
	}

</style>
